import React, { useEffect, useContext, useState } from "react";
import { useLocation } from "react-router-dom"
import dianzan from "../../assets/images/dianzan.png"
import pinglun from "../../assets/images/pinglun.png"
import { AuthContext } from '../../contexts/authContext';
import { getArticles } from "../../fake-api"
import { createindexDB, getAllData } from "../../utils/IndexDB";
import "./message.css"
export const Message = () => {

    let { pathname, search } = useLocation()
    const { state, dispatch } = useContext(AuthContext)
    const [allData, setAllData] = useState([])
    let sortBy = search.split("=")[1]

    const gotoDetail = async(props)=>{
        await createindexDB(props)
           
    }
    const callback = (data)=>{
        console.log(data);
        dispatch({ articles: data })
    }
    useEffect(async () => {
        let result = {
            data:{
                articles:[]
            }
        }
        if (sortBy=="new") {
            result = await getArticles(state.category_id, sortBy)
            dispatch({ articles: result.data.articles })
        } else if (sortBy == "hottest"){
            console.log("历史");
             await getAllData(callback)

        } else {
            result = await getArticles(state.category_id)
            dispatch({ articles: result.data.articles })
        }

        

    }, [search, pathname])
    

    return (
        <>
            {
                state.articles ? state.articles.map(item => {
                    return (
                        <div className="article-wrapper" key={item.article_id} onClick={() => gotoDetail(item)}>
                            <div className="article-info">
                                <span>{item.author_user_info.user_name}</span>
                                <span className="article-info-separate">|</span>
                                <span>
                                    {/* {new Date(item.article_info.mtime - item.article_info.ctime)} */}
                                    {
                                        Math.ceil((item.article_info.mtime - item.article_info.ctime) / (1000 * 60)) + "分钟前"
                                    }
                                </span>
                            </div>
                            <div className="article-tag">JavaScript</div>
                            <div className="article-title">
                                <h2><b>{item.article_info.title}</b></h2>
                            </div>
                            <div className="article-midWrapper">
                                <div>
                                    <div className="articles-body">
                                        {item.article_info.brief_content}
                                    </div>
                                    <ul className="article-comment">
                                        <li>
                                            <img className="article-icon" src={dianzan} alt="" />
                                            <span className="article-count">{item.article_info.digg_count}</span>
                                        </li>
                                        <li>
                                            <img className="article-icon" src={pinglun} alt="" />
                                            <span className="article-count">{item.article_info.comment_count}</span>
                                        </li>
                                    </ul>
                                </div>

                                <img className="article-img" src={item.article_info.cover_image} alt="" />
                            </div>
                        </div>
                    )
                }) : "没有数据"
            }
        </>

    )
}